<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     *{margin:0;padding:0;}
     #box{
         width:200px;
         height: 30px;
         line-height: 30px;
         border:1px solid #ccc;
         margin: 50px auto;
         position: relative;
     }
     ul{
          list-style: none;
          border:1px solid #ccc;
          display: none;
     }
    </style>
</head>
<body>
    <div id="box">
        <cite>请选择</cite>
        <ul>
            <li>何以为家</li>
            <li>肖申克的救赎</li>
            <li>心灵捕手</li>
            <li>放牛班的春天</li>
            <li>美丽人生</li>
        </ul>
    </div>
    <script>
    var box=document.getElementById("box");
    var ul=document.getElementsByTagName("ul")[0];
    var li=document.getElementsByTagName("li");
    var cite=document.getElementsByTagName("cite")[0];
    box.onclick=function(){
       ul.style.display="block";
       for(var i=0;i<li.length;i++){
          li[i].onclick=function(e){
              //阻止冒泡
              var e=window.event||e;
              //非IE
              if(e.stopPropagation){
                  e.stopPropagation();
              }else{
                  //IE
                  e.cancelable=true;
              }
              cite.innerHTML=this.innerHTML;
              ul.style.display="none";
          }
          li[i].onmouseover=function(){
              //原本的颜色
              window.bg=this.style.background;
             this.style.background="#ccc";
          }
          li[i].onmouseout=function(){
            this.style.background=bg;
          }
       }
    }
    var index=0;
    //键盘上下键操作
    document.onkeydown=function(e){
         var e=window.event||e;
         switch(e.keyCode){
             case 38:
              for(var i=0;i<li.length;i++){
                  //初始全部市白色
                  li[i].style.background="#fff";
              }
              index--
              if(index<0){
                  index=li.length-1;
              }
              li[index].style.background="#ccc"
             break;
             case 40:
             for(var i=0;i<li.length;i++){
                  //初始全部市白色
                  li[i].style.background="#fff";
              }
              index++
              if(index>li.length-1){
                  index=0;
              }
              li[index].style.background="#ccc"
             break;
             case 13:
            //  alert(li[index].innerHTML);
            for(var i=0;i<li.length;i++){
                  //初始全部市白色
                  li[i].style.background="#fff";
              }
             cite.innerHTML=li[index].innerHTML;
             ul.style.display="none";
             break;
         }
    }
    </script>
</body>
</html>